<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Todo 本地存储</title>

		<style type="text/css">
			html {
				box-sizing: border-box;
				background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat;
				background-size: cover;
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-family: futura, "trebuchet ms", arial, sans-serif;
			}

			*,
			*:before,
			*:after {
				box-sizing: inherit;
			}

			svg {
	      fill:white;
	      background: rgba(0,0,0,0.1);
	      padding: 20px;
	      border-radius: 50%;
	      width:200px;
	      margin-bottom: 50px;
	    }

			.wrapper {
				padding: 20px;
				max-width: 350px;
				background: rgba(255,255,255,0.95);
				box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
			}

			h2 {
				text-align: center;
				margin: 0;
				font-weight: 200;
			}

			.plates {
				margin: 0;
				padding: 0;
				text-align: left;
				list-style: none;
			}

			.plates li {
				border-bottom: 1px solid rgba(0,0,0,0.2);
				padding: 10px 0;
				font-weight: 100;
				display: flex;
			}

			.plates label {
				flex: 1;
				cursor: pointer;
			}

			.plates input {
				display: none;
			}

			.plates input + label:before {
				content: '⬜️';
				margin-right: 10px;
			}

			.plates input:checked + label:before {
				content: '🌮';
			}

			.add-items {
				margin-top: 20px;
			}

			.add-items input {
				padding: 10px;
				outline: 0;
				border: 1px solid rgba(0,0,0,0.1);
			}
		</style>
	</head>
	<body>

		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
			<g>
				<path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7   c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469   L449.4,481.8z"></path>
				<path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5   C144.2,115.7,150.5,122,158.3,122z"></path>
				<path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5   C231,88.4,237.3,94.7,245.1,94.7z"></path>
				<path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5   C317.8,115.7,324.1,122,331.9,122z"></path>
				<path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0   c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1   c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8   c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4   c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z    M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3   c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3   l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"></path>
				<circle cx="398.8" cy="273.8" r="14.1"></circle>
			</g>
		</svg>

		<div class="wrapper">
			<h2>LOCAL TAPAS</h2>
			<p></p>
			<ul class="plates">
				<li>Loading Tapas...</li>
			</ul>
			<form class="add-items">
				<input type="text" name="item" placeholder="Item Name" required=""/>
				<input type="submit" value="+ Add Item"/>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		// 提前定义好所有用到的变量；
		// 添加item的按钮
		const addItems = document.querySelector('.add-items');
		// todolist列表
		const itemsList = document.querySelector('.plates');
		// 本地缓存的所有todoitem
		const items = JSON.parse(localStorage.getItem('items')) || [];

		// 添加item事件
		function addItem (e) {
			//阻止默认事件的触发，防止在提交后页面自己刷新
			e.preventDefault();
			const text = this.querySelector('[name=item]').value;
			const item = {
				//ES6的简写形式 => text: text;
				text,
				done: false
			};
			items.push(item);
			localStorage.setItem('items', JSON.stringify(items));
			populateList(items, itemsList);
			//添加完数据后，重置输入框
			this.reset();
		}
		addItems.addEventListener('submit', addItem);

		// 切换完成状态事件
		function toggleDone (e) {
			// 跳过所有input，只处理label
			if (!e.target.matches('input')) {
				return;
			}
			const node = e.target;
			const index = node.dataset.index;
			items[index].done = !items[index].done;
			localStorage.setItem('items', JSON.stringify(items));
			populateList(items, itemsList);
		}
		itemsList.addEventListener('click', toggleDone);

		// 列表显示函数
		// 设置默认值，防止参数出错的时候crash
		function populateList (populates = [], place) {
			place.innerHTML = populates.map((populate, index) => {
				return `
					<li>
						<input type="checkbox" id=item${index} data-index=${index} ${populate.done ? 'checked' : ''}>
						<label for="item${index}">${(populate.text)}</label>
					</li>
				`;
			}).join('');
		}

		populateList(items, itemsList);

		// 清除缓存
		// 在关闭浏览器之后清除缓存
//		window.onbeforeunload = function (e) {
//			localStorage.removeItem('items');
//			 let confirmationMessage = "\o/";
//			e.returnValue = confirmationMessage;
//			return confirmationMessage;
//		}
	</script>
</html>
